<template>
  <div>
    <el-form ref="formEl" :model="model" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>
    </el-form>

    <el-button @click="reset">表单重置 - {{ model.username }}</el-button>
  </div>

  <MyModal ref="modalEl" />
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import MyModal from "./MyModal.vue";
import type { FormInstance } from "element-plus";

const model = reactive({
  username: "",
});

const rules = {
  username: [{ required: true, message: "请输入用户名" }],
};

// const formEl = ref<{
//   resetFields: () => void;
// } | null>(null);

const formEl = ref<FormInstance | null>(null);

function reset() {
  // model.username = "";
  // console.log(formEl.value);
  formEl.value?.clearValidate;
}

const modalEl = ref<InstanceType<typeof MyModal> | null>(null);

modalEl.value?.b;

class Aniaml {
  name: string = "张三";
  age: number = 18;
}

const a = new Aniaml();

const b: InstanceType<typeof Aniaml> = new Aniaml();
</script>
